<template>
    <div>
        <div style="margin: 20px 5px 10px 5px;padding: 5px;">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-card style="height: 600px">
                        <template slot="header">
                            <span>部门</span>
                            <span><el-button icon="el-icon-plus" size="mini" type="text" style="float: right" @click="openDepartmentWindow('departmentChild','0',null)"></el-button></span>
                        </template>
                        <el-tree
                                ref="tree"
                                show-checkbox
                                check-strictly
                                :data="departmentList"
                                highlight-current
                                icon-class="el-icon-s-flag"
                                :props="tree.defaultProps"
                                check-on-click-node
                                @check-change="treeChange"
                                node-key="id">
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                <span>{{ node.label }}</span>
                                <span>
                                    <el-button type="text" size="mini" icon="el-icon-plus" v-if="data.pid == '0'" @click="openDepartmentWindow('departmentChild',data.id,null)"></el-button>
                                    <el-button type="text" size="mini" icon="el-icon-edit" @click="openDepartmentWindow('departmentChild',data.id,data)"></el-button>
                                    <el-button type="text" size="mini" icon="el-icon-close" v-if="data.children.length == 0"  @click="removeDepartment(data)"></el-button>
                                </span>
                            </span>
                        </el-tree>
                    </el-card>
                </el-col>
                <el-col :span="18">
                    <el-card shadow="never" style="border:0rem">
                        <template slot="header">
                            <span>部门员工</span>
                            <el-tooltip class="item" effect="dark" content="添加员工" placement="bottom">
                                <span style="margin-left: 20px;float:right" class="el-icon-plus" @click="openUserWindow('userChild',null)"></span>
                            </el-tooltip>
                        </template>
                        <el-table size="mini" v-loading="loading" :header-cell-style="{background:'#67C23A',color:'white',fontSize:'15px'}" :data="userList" style="padding: 0px 20px 0px 0px">
                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <el-form inline label-position="right" class="demo-table-expand">
                                        <el-form-item label="用户名"><span>{{props.row.username}}</span></el-form-item>
                                        <el-form-item label="密码"><span>{{props.row.password}}</span></el-form-item>
                                        <el-form-item label="等级"><span>{{props.row.level}}</span></el-form-item>
                                        <el-form-item label="角色"><span>{{props.row.roles.join(",")}}</span></el-form-item>
                                    </el-form>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="nickName" label="姓名"></el-table-column>
                            <el-table-column align="center" prop="jobTitle" label="职位"></el-table-column>
                            <el-table-column align="center" label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="success" icon="el-icon-edit" @click="openUserWindow('userChild',scope.row)"></el-button>
                                    <el-button size="mini" type="success"  @click="removeUser(scope.row)" icon="el-icon-delete"></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <department-child ref="departmentChild"></department-child>
        <user-child ref="userChild"></user-child>
    </div>
</template>

<script>

    import { findAll ,removeDepartment} from "@/api/access/department";
    import { getUserList } from "@/api/access/user";

    export default {
        name: "user-index",
        data(){
            return {
                loading:true,
                userList:[],
                departmentList:[],
                tree:{
                    defaultProps: { //tree数据格式化
                        children: 'children',
                        label: 'name'
                    }
                }
            }
        },
        components:{
          DepartmentChild:()=>import("@/views/access/department-child.vue"),
          UserChild:()=>import("@/views/access/user-child.vue")
        },
        methods:{
            getDepartmentList(){
                findAll().then(res=>{
                    this.departmentList = res.data.data;
                })
            },
            openDepartmentWindow(name,pid,data){
                if(data == null){
                    this.$refs[name].data = {};
                    this.$refs[name].data.pid = pid;
                }else{
                    this.$refs[name].data = data;
                }
                this.$refs[name].value = true;
            },
            removeDepartment(data){
                this.$confirm("确定要删除吗？","友情提示",{type:'warning'}).then(()=>{
                    removeDepartment(data).then(res=>{
                        this.$message({
                            type:res.data.success?'success':'error',
                            message:res.data.message,
                            center:true
                        });
                        this.getDepartmentList();
                        this.getUserList({departmentIds:""});
                    })
                })
            },
            getUserList(data){
                getUserList(data).then(res=>{
                   this.userList = res.data.data;
                   this.loading = false;
                })
            },
            treeChange(data){
                let departmentIds =  this.$refs.tree.getCheckedKeys().join(",");
                this.getUserList({departmentIds:departmentIds});
            },
            openUserWindow(name,data){ //打开添加,修改用户页面
                if(data == null){
                    this.$refs[name].user = {};
                }else {
                    this.$refs[name].user = data;
                }
                this.$refs[name].value = true;
            },
        },
        created(){
            this.getDepartmentList();
            this.getUserList({departmentIds:""});
        }
    }
</script>

<style>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>